<template>
	<view class="uni-forms-item__content">
		<view class="flex text-gray" style="margin-bottom: 20rpx;">
			<text v-if="name">{{name}}</text>
			<text v-else>拖动地图或搜索改变位置</text>
		</view>
		<map id="map" class="map" min-scale="10" :scale="17" :show-location="true" :latitude="latitude"
			:longitude="longitude" @regionchange="onRegionchange">
			<cover-image class="map-center-icon" src="/static/location-center.png"></cover-image>
		</map>
		<uni-forms ref="form" v-model="formData" validateTrigger="bind" style="padding: 0;min-width: 300rpx;">
			<view class="flex" style="margin-top: 20rpx;">
				<uni-easyinput placeholder="搜索地址" v-model="formData.addressSearch" />
				<button class="cu-btn bg-green margin-left-sm" @click="geocoder">搜索</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	let _mapCtx = null;
	const db = uniCloud.database();
	export default {
		name: 'cloud-map',
		data() {
			return {
				formData: {
					addressSearch: "",
				},
				name: "",
				timer: false,
				latitude: 39.909,
				longitude: 116.39742,
				nearAddressList: []
			};
		},
		props: {
			value: [Number, String, Array, Object],
			location: {
				// 排列方向 row column
				type: Object,
				default: () => {}
			},
		},
		created() {
			_mapCtx = uni.createMapContext('map');
			if (this.value) {
				this.setValues(this.value);
			} else {
				this.reverseGeocoder();
			}
			this.form = this.getForm('uniForms')
			this.formItem = this.getForm('uniFormsItem')
			if (this.formItem) {
				if (this.formItem.name) {
					this.rename = this.formItem.name
					this.form.inputChildrens.push(this)
				}
			}
		},
		watch: {
			value(newVal) {
				if (newVal) {
					this.setValues(newVal);
				}
			}
		},
		methods: {
			/**
			 * 初始化变量值
			 */
			init() {

			},
			/**
			 * 获取父元素实例
			 */
			getForm(name = 'uniForms') {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== name) {
					parent = parent.$parent;
					if (!parent) return false;
					parentName = parent.$options.name;
				}
				return parent;
			},
			setValues(newVal) {
				if (typeof newVal == "string") {
					console.log("string", newVal)
					this.formData.addressSearch = newVal;
					this.geocoder()
					this.name = newVal;
					this.formData.addressSearch = "";
				} else {
					this.name = newVal.name;
					this.latitude = newVal.latitude;
					this.longitude = newVal.longitude;
				}
			},
			//地图区域改变
			onRegionchange(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					//h5 end  安卓 regionchange
					if (e.type === 'end' || e.type === 'regionchange') {
						//中间位置
						_mapCtx.getCenterLocation({
							success: res => {
								this.latitude = res.latitude
								this.longitude = res.longitude
								console.log("拖动地图", this.latitude, this.longitude)
								this.reverseGeocoder();
							},
							fail: err => {
								console.log(err);
							}
						})
					}
				}, 500)
			},
			geocoder() {
				console.log("开始搜索", this.formData.addressSearch)
				this.$request('utils/getAddressGeo', {
						address: this.formData.addressSearch
					})
					.then(res => {
						console.log(res)
						this.latitude = res.location.lat;
						this.longitude = res.location.lng;
						this.reverseGeocoder();
					}).catch(err => {

					}).finally(err => {})
			},
			reverseGeocoder() {
				this.$request('utils/getLocationAddress', {
						fromLatlng: [this.latitude, this.longitude].join(",")
					})
					.then(res => {
						console.log(res)
						this.name = res.formatted_addresses.recommend;
						this.$emit('input', {
							...res.ad_info,
							name: res.formatted_addresses.recommend,
							addres: res.address,
							latitude: this.latitude,
							longitude: this.longitude,
							location: new db.Geo.Point(this.longitude, this.latitude)
						});
					}).catch(err => {

					}).finally(err => {})
			},
		}
	}
</script>
<style lang="scss">
	.map {
		width: 960rpx;
		height: 500rpx;
	}

	.map-center-icon {
		position: absolute;
		left: 444rpx;
		top: 214rpx;
		width: 72rpx;
		height: 72rpx;
	}
</style>
